<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>行业：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.industryId"
                        v-loading="industryFlag"
                        filterable
                        clearable
                        placeholder="请选择行业"
                        reserve-keyword
                    >
                        <el-option
                            v-for="item in industryData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>考试名称：</label>
                <div class="table-query-input">
                    <el-input v-model="queryData.searchKey"></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>属性：</label>
                <el-select
                    v-model="queryData.attribute"
                    placeholder="属性"
                    clearable
                >
                    <el-option
                        label="热门"
                        value="1"
                    >
                    </el-option>
                    <el-option
                        label="推荐"
                        value="2"
                    >
                    </el-option>
                    <el-option
                        label="最新"
                        value="4"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="primary"
                plain
                style="margin-bottom: 2em"
                icon="el-icon-plus"
                @click="clickAdd('添加考试')"
            >新增数据
            </el-button>
            <el-button
                type="danger"
                plain
                style="margin-bottom: 2em"
                icon="el-icon-delete"
                :disabled="selectDisable"
                @click="
                    tableDelete(
                        '/exam/exam/deletes',
                        {
                            ids: tableSelect
                        },
                        true
                    )
                "
            >批量删除
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="tableSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="考试名称(前台显示)"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="serverName"
                    label="考试别名(后台显示)"
                    width="120"
                ></el-table-column>
                <el-table-column label="图标" width="120" align="center">
                    <template slot-scope="scope">
                        <img
                            v-if="scope.row.icon"
                            :src="coverImage(scope.row.icon)"
                            class="icon"
                        />
                        <p v-else>无</p>
                    </template>
                </el-table-column>
                <el-table-column label="考试类型" width="120">
                    <template slot-scope="scope">
                        <k-tag
                            v-if="scope.row.industryId === 'gjtk'"
                            tag="高教题库"
                            text
                        ></k-tag>
                        <k-tag
                            v-else
                            tag="职业资格"
                            text
                            color="#ff0000"
                        ></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="industryName"
                    label="行业名称"
                    min-width="100"
                ></el-table-column>

                <el-table-column label="属性" width="200">
                    <template slot-scope="scope">
                        <div class="tag-table">
                            <k-tag
                                v-if="(scope.row.attribute & 1) === 1"
                                :tag="{ desc: '热门', color: 'red' }"
                            ></k-tag>
                            <k-tag
                                v-if="(scope.row.attribute & 2) === 2"
                                :tag="{ desc: '推荐', color: 'blue' }"
                            ></k-tag>
                            <k-tag
                                v-if="(scope.row.attribute & 4) === 4"
                                :tag="{ desc: '最新', color: 'green' }"
                            ></k-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" width="150">
                    <template
                        slot-scope="scope"
                        v-loading="scope.row.opLoading"
                    >
                        <div
                            v-show="!scope.row.sortEdit"
                            @dblclick="scope.row.sortEdit = true"
                        >
                            {{ scope.row.sort }}
                        </div>
                        <el-input
                            v-show="scope.row.sortEdit"
                            v-model="scope.row.sort"
                            @blur="
                                sortEditSave(
                                    '/exam/exam/change-sort',
                                    scope.row
                                )
                            "
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="categoryCount"
                    label="科目数量"
                    width="120"
                ></el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            class="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="
                                clickSimpleEdit(
                                    scope.row,
                                    '考试信息编辑',
                                    () => {},
                                    data => {
                                        return { ...data };
                                    }
                                )
                            "
                        >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            class="warning"
                            type="text"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/exam/exam/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                        >删除
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            class="warning"
                            type="text"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="generatePackage(scope.row)"
                        >生成套餐
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            custom-class="one-dialog"
            @close="
                () => {
                    base64Icon = null;
                }
            "
        >
            <el-form
                ref="dataForm"
                :model="dataForm"
                label-width="6em"
                :rules="dataFormRule"
                class="table-edit-from exam-form"
            >
                <el-form-item
                    label="行业"
                    prop="industryId"
                >
                    <el-select
                        v-model="dataForm.industryId"
                        placeholder="请选择行业"
                    >
                        <el-option
                            v-for="item in industryData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图标" prop="id">
                    <el-upload
                        class="icon-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        accept=".jpg,.png,.jpeg"
                        :auto-upload="false"
                        :on-change="iconChange"
                    >
                        <img
                            v-if="base64Icon || dataForm.icon"
                            :src="base64Icon || coverImage(dataForm.icon)"
                            class="icon"
                        />
                        <i v-else class="el-icon-plus icon-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="考试名称(前台显示)" prop="name">
                    <el-input v-model="dataForm.name"></el-input>
                </el-form-item>
                <el-form-item label="考试别名(后台显示)" prop="severName">
                    <el-input v-model="dataForm.serverName"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="dataForm.sort"></el-input>
                </el-form-item>

                <el-form-item :key="dataForm.attribute" label="属性">
                    <el-checkbox
                        :checked="(dataForm.attribute & 1) === 1"
                        @change="attributeChange(1)"
                    >热门
                    </el-checkbox
                    >
                    <el-checkbox
                        :checked="(dataForm.attribute & 2) === 2"
                        @change="attributeChange(2)"
                    >推荐
                    </el-checkbox
                    >
                    <el-checkbox
                        :checked="(dataForm.attribute & 4) === 4"
                        @change="attributeChange(4)"
                    >最新
                    </el-checkbox
                    >
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="dialogClose"
                >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="
                        formDataSave('/exam/exam/update', undefined, () => {
                            base64Icon = null;
                        })
                    "
                >保 存</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Fetch from "@/api/request.js";
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {examBase} from "@/layout/mixin/examBase";
import {get, put, post} from "@/api/request";
import {ossUpload, elUploadHandler} from "@/utils/file.js";

export default {
    name: "Exam",
    components: {},
    mixins: [TablePage, examBase],
    data() {
        return {
            queryData: {
                searchKey: "",
                industryId: null,
                examType: null,
                haveIndustryName: true,
                haveCategoryCount: true
            },
            initAddForm: {
                id: null,
                name: null,
                serverName: null,
                sort: 100,
                attribute: 0,
                industryId: null,
                examType: "zhiye",
                icon: null
            },
            base64Icon: null,
            dataFormRule: {
                industryId: [
                    {
                        required: true,
                        message: "请选择行业",
                        trigger: "blur"
                    }
                ],
                name: [
                    {
                        required: true,
                        message: "请输入考试名称",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    computed: {
        ...mapState({})
    },
    watch: {
        examType() {
            this.queryData.industryId = null;
        },
        "queryData.industryId"(industryId) {
            this.queryData.examId = null;
            if (industryId) {
                this.loadExam(industryId);
            } else {
                this.examData = [];
            }
        }
    },
    created() {
        this.loadIndustry();
    },
    mounted() {
    },
    methods: {
        search(queryData = {}) {
            this.loadTable("/exam/exam/page", {
                ...queryData,
                industryId:
                    this.examType === "gjtk"
                        ? "gjtk"
                        : this.queryData.industryId
            });
        },
        attributeChange(vl) {
            if ((this.dataForm.attribute & vl) === vl) {
                this.dataForm.attribute =
                    this.dataForm.attribute & (0xffffffff ^ vl);
            } else {
                this.dataForm.attribute = this.dataForm.attribute | vl;
            }
        },
        iconChange(file, fileList) {
            elUploadHandler(file, fileList, evt => {
                this.base64Icon = evt.target.result;
            }).then(result => {
                this.dataForm.icon = result;
            });
        },
        generatePackage(row) {
            row.opLoading = true;
            post("/exam/exam/generate-package", {examId: row.id}).then(res => {
                this.$message.success("生成套餐成功")
            }).finally(
                () => {
                    row.opLoading = false;
                }
            );
        }
    }
};
</script>

<style lang="scss" scoped>
.tag-table {
    ::v-deep .el-tag {
        margin-right: 10px;
        margin-top: 10px;
    }
}

.table-data-box {
    .icon {
        width: 60px;
        height: 60px;
        object-fit: cover;
    }
}
</style>
<style lang="css">
.exam-form .icon-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.exam-form .icon-uploader .el-upload:hover {
    border-color: #409eff;
}

.exam-form .icon-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 2.58rem;
    height: 2.58rem;
    line-height: 2.58rem;
    text-align: center;
}

.exam-form .icon {
    width: 2.58rem;
    height: 2.58rem;
    display: block;
}
</style>
